import * as React from 'react';
import { Checkbox, Empty, Space, Tag, Tooltip, Typography } from 'antd';
import { LiteralUnion } from 'antd/lib/_util/type';
import { PresetColorType, PresetStatusColorType } from 'antd/lib/_util/colors';
import { Result } from '@/pages/fine/FineLic';
import { useEffect, useState } from 'react';
import { downloadFileName, calcTimeTag } from '@/utils';
import styles from './style.less';
import DownLoad from '../Download';

const { Paragraph } = Typography;

export interface LicCodeProps {
  tags?: { name: string; color?: LiteralUnion<PresetColorType | PresetStatusColorType, string> }[];
  result: Partial<Result>;
}

const LicCode: React.FC<LicCodeProps> = (props) => {
  const { tags, result } = props;
  const { fileName, contents, deadline } = result;
  const [downloadName, setDownloadName] = useState<string>(fileName);

  useEffect(() => {
    setDownloadName(fileName);
  }, [fileName]);

  return (
    <div className={styles.container}>
      {contents ? (
        <>
          <div className={styles.tags}>
            <Tag color={'blue'}>{fileName}</Tag>
            <Tag color={'green'}>{calcTimeTag(deadline)}</Tag>
            {tags.map((tag, index) => {
              return (
                <Tag key={`${tag.name}_${index}`} color={tag.color}>
                  {tag.name}
                </Tag>
              );
            })}
          </div>
          <div className={styles.code}>
            <pre>
              <code>
                <span className="">
                  <Paragraph copyable={{ text: contents, tooltips: ['复制', '已复制'] }} className={styles.contents}>
                    {contents}
                  </Paragraph>
                </span>
              </code>
            </pre>
          </div>
          <div className={styles.action}>
            <Space size="middle">
              <Tooltip title="下载的文件名是否包含授权截止时间">
                <Checkbox
                  onChange={(e) => {
                    setDownloadName(downloadFileName(fileName, deadline, e.target.checked));
                  }}>
                  截止时间
                </Checkbox>
              </Tooltip>
              <Tooltip title="下载文件到本地">
                <DownLoad contents={contents} fileName={downloadName} />
              </Tooltip>
            </Space>
          </div>
        </>
      ) : (
        <Empty />
      )}
    </div>
  );
};

LicCode.defaultProps = {
  tags: [],
  contents: '',
};

export default LicCode;
